<template>
	<view class="collection">
		<view class="header_box flex">
			<!-- <image class="sousuo_icon_img" src="../../filepages/static/search.png" mode=""></image> -->
			<input class="uni-input" placeholder-style="color: #CCCCCC;font-size:24upx;" placeholder="输入商品名查找" v-model="keyword" @blur="getCollectList"/>
			<view class="right_edit s32 family f500" @click="edit">
				编辑
			</view>
		</view>
		<view class="list_box flex" v-for="(item,index) in collectList" :key="index" @longtap="longBox(index)">
			<label class="radio" v-if="type" @click="del(index)">
				<radio color="#EBBE87" style="transform: scale(0.8);" value="r1" :checked="item.goods.checked" />
			</label>
			<view class="topping_box s28 family f500 txtali" v-if="item.goods.topping" @click="toppingClick(index)">
				置顶
			</view>
			<view @click="goDetails(item.goods.id,item.goods.skus.id)" style="width: 100%;display: flex;">
				<view class="goods_box_img">
					<image class="w100 h100" :src="item.goods.skus.thumbnail?'https://sz.vvv5g.com'+item.goods.skus.thumbnail:item.goods.image_src" mode=""></image>
				</view>
				<view class="goods_detail_box">
					<view class="flex">
						<view class="shop_name s28 family f500">
							{{item.shop.shopname}}
						</view>
					</view>
					<view class="goods_name s28 family f500">
						{{spceType(item.goods.title,item.goods.skus.difference,item.spec_type)}}
					</view>
					<view class="goods_bottom flex">
							<view class="goods_price flex" style="width: 228upx;">
								<text class="s24 fblod familytow" style="color: #333;margin-top: 20upx;">￥</text>
								<view class="goods_price_txt s44 familytow fblod">
									{{item.goods.skus.price}}
								</view>
							</view>
						<view class="flex" style="justify-content: space-between;width: 240upx;">
							<view class="sc_box" @click.stop="active(index,item.goods.id,item.goods.skus.id)">
								<image class="w100 h100" :src="item.goods.follow ? '/pages/filePages/static/sc_active.png' : '/pages/filePages/static/sc.png'" mode=""></image>
							</view>
							<view class="sc_cart" @click.stop="onCart(item)">
								<image class="w100 h100" src="/pages/filePages/static/sc_cart.png" mode=""></image>
							</view>
							<view class="sc_fx" @click.stop="onFenxi(item.goods.id)">
								<image class="w100 h100" src="/pages/filePages/static/sc_fx.png" mode=""></image>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_box flex" :style="{'height': flag == true ? '166rpx' : '98rpx'}" v-if="type">
			<label class="radio_bot" @click="allCheck">
				<radio color="#EBBE87" style="transform: scale(0.8);" value="r1" :checked="allChecked" />
			</label>
			<view class="all_checked s36 family f500">
				全选
			</view>
			<view class="del_btn s28 family f500 txtali" @click="delBtn">
				删除
			</view>
		</view>
		<share-box ref="child" :show="show" :type="type1"></share-box>
	</view>
</template>

<script>
	import shareBox from '@/components/share.vue';
	export default {
		components: {
			shareBox
		},
		data() {
			return {
				type: false,
				show: false,
				collectList: [],
				flag: false,
				allChecked: false,
				idList: [],
				type1: 1,
				keyword: "",
				cartLists:'',//购物车列表
			}
		},
		onLoad() {
			// 判断如果缓存有值就拿缓存的值缓存没有值就请求数据
				this.getCollectList()
		},
		onShow() {
			// 判断是安卓还是ios
			this.flag = this.bottomNav()
		},
		methods: {
			// 置顶事件
			toppingClick(index) {
				this.collectList[index].goods.topping = !this.collectList[index].goods.topping
				this.collectList.map((item,index) => {
					item.goods.topping = false
					return item
				})
				let arr = this.collectList.splice(index,1)
				this.collectList.unshift(arr[0])
				this.$store.commit('setCollection',{key:'collectionList',data:this.collectList})
			},
			
			// 长按事件
			longBox(index) {
				this.collectList[index].goods.topping = !this.collectList[index].goods.topping
			},
			
			// 分享商品
			onFenxi(id) {
				this.$refs.child.xianshi(id)
			},
			
			// 加入购物车
			onCart(item) {
				let goodsData = {
					type: 'add',
					data: {
						goods_id: item.goods_id,
						number: 1,
						sku_id: item.goods.skus.id,
						shop_id: item.goods.shop_id,
						title: item.goods.title,
						sku: item.goods.sku
					}
				}
				this.$request({
					url: 'cart/storage',
					method: 'POST',
					data: goodsData
				}).then(res => {
					if (res.statusCode == 200) {
						uni.showToast({
							title: '已加入购物车!',
							icon: 'none',
							duration: 2000
						});
						this.cartLists = uni.getStorageSync('cartList')
						if (item.goods.id == this.getCartLists()) {
							this.$store.dispatch('getCarList')
						} else {
							this.$store.dispatch('getCarList')
						}
					}
				})
			},
			// 获取购物车数据
			getCartLists() {
				for (let i = 0; i < this.cartLists.length; i++) {
					return this.cartLists[i].goods_id
				}
			},
			// 点击列表
			goDetails(id,sku_id=''){
				uni.navigateTo({
					url: '/pages/filePages/goodsDetail/goodsDetail?id='+id + "&type=0"+'&sku_id='+sku_id
				})
			},
			
			// 切换收藏
			active(index,id,sku_id='') {
				this.collectList[index].goods.follow = !this.collectList[index].goods.follow
				this.$request({
					url: 'product/follow',
					method: 'POST',
					data: {
						id: id,
						sku_id:sku_id
					}
				}).then(res => {
					let flag = res.data.data
					if (res.statusCode == 200) {
						this.$store.dispatch('getCollection')
						if (flag == true) {
							uni.showToast({
								title: '收藏成功',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: '取消收藏',
								icon: 'none'
							})
						}
						this.getCollectList()
					}
				})
			},
			
			// 获取收藏列表
			getCollectList() {
				let that = this;
				that.$request({
					url: 'product/collect',
					data: {
						type: 'goods',
						keyword: that.keyword
					}
				}).then(res => {
					that.collectList = res.data.data.data.map((item,index) => {
						item.goods.checked = false
						item.goods.topping = false
						return item
					})
				})
			},
			
			// 全选
			allCheck() {
				this.allChecked = !this.allChecked
				this.collectList.map((item,index) => {
					if(this.allChecked) {
						item.goods.checked = true
					} else {
						item.goods.checked = false
					}
				})
			},
			
			// 删除收藏商品
			del(index) {
				this.collectList[index].goods.checked = !this.collectList[index].goods.checked
				let flag = 0
				for (let s of this.collectList) {
					if(s.goods.checked) {
						flag ++
					}
				}
				this.allChecked = flag >= this.collectList.length ?  true : false
			},
			
			// 切换关注并且如果取消下次刷新会删除
			delBtn() {
				let ids = []
				this.collectList.forEach(item => {
					if(item.goods.checked == true) {
						ids.push(item.id)
					}
				})
				
				if(ids.length < 1){
					uni.showToast({
						title: "请选择商品",
						icon: "none"
					})
					return false
				}
				
				this.$request({
					url: 'package/delfollow',
					method: 'POST',
					data: {
						ids: ids.toString()
					}
				}).then(res => {
					if(res.data.code == 1){
						uni.showToast({
							title: "删除成功",
							icon: "none"
						})
						this.type = false
						this.getCollectList()
						this.$getUserInfo()
					}
				})
			},
			
			// 显示隐藏选择按钮
			edit() {
				this.type = !this.type
			}
		}
	}
</script>

<style scoped lang="scss">
	.collection {
		overflow-x: hidden;
		width: 100%;

		.bottom_box {
			width: 750upx;
			height: 98upx;
			background: #FFFFFF;
			box-shadow: 0upx -8upx 18upx 2upx rgba(0, 0, 0, 0.05);
			position: fixed;
			bottom: 0;

			.radio_bot {
				margin-left: 40upx;
				margin-top: 26upx;
			}

			.all_checked {
				color: #333333;
				margin-top: 24upx;
				margin-left: 14upx;
			}

			.del_btn {
				width: 188upx;
				height: 72upx;
				background: #EBBE87;
				border-radius: 40upx;
				line-height: 72upx;
				color: #FFFFFF;
				margin-top: 16upx;
				margin-left: 345upx;
			}
		}

		.header_box {
			width: 750upx;
			height: 100upx;
			background: #fff;
			overflow: hidden;

			.sousuo_icon_img {
				width: 40upx;
				height: 40upx;
				display: inline-block;
				margin-top: 32upx;
				position: absolute;
				left: 56upx;
			}

			.uni-input {
				width: 522upx;
				height: 68upx;
				background: #F3F3F3;
				border-radius: 34upx;
				margin-left: 28upx;
				margin-top: 14upx;
				color: #000;
				padding-left: 82upx;
			}

			.right_edit {
				margin-top: 24upx;
				margin-left: 22upx;
				color: #000000;
			}
		}

		.list_box {
			width: 750upx;
			height: 268upx;
			background: #fff;
			overflow: hidden;
			.radio {
				margin-top: 110upx;
				margin-left: 40upx;
			}
			.topping_box {
				width: 108upx;
				height: 64upx;
				background-image: url("");
				background-size: 100% 100%;
				position: absolute;
				left: 332upx;
				margin-top: -20upx;
				color: #fff;
				line-height: 54upx;
			}
			.goods_box_img {
				width: 204upx;
				height: 204upx;
				background-color: #666;
				margin-top: 32upx;
				margin-left: 32upx;
			}

			.goods_detail_box {
				margin-top: 32upx;
				margin-left: 20upx;

				.shop_name {
					width: 336upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.jian_t {
					width: 50upx;
					height: 42upx;
					margin-top: -2upx;
					position: absolute;
					right: 34upx;
				}

				.goods_name {
					width: 438upx;
					color: #666666;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-top: 8upx;
				}

				.goods_bottom {
					margin-top: 30upx;

					.sc_box {
						width: 44upx;
						height: 40upx;
						margin-top: 6upx;
					}

					.sc_cart {
						width: 44upx;
						height: 44upx;
						margin-top: 6upx;
					}

					.sc_fx {
						width: 38upx;
						height: 34upx;
						margin-top: 10upx;
					}
				}
			}
		}
	}
</style>
<style>
	page {
		width: 750upx;
		height: 100%;
		background-color: #F4F5F9;
		overflow-x: hidden;
	}
</style>
